<template>
  <div v-if="modelId" class="h-100p">
    <el-card v-loading = "!iframeLoaded" class="activiti-card h-100p">
      <iframe class="w-100p h-100p" :src="'/activiti/modeler.html?modelId=' + modelId" frameborder="0"></iframe>
      <div v-if="iframeLoaded" class="prop-edit-panel-icon">
        <i :class="{
          'el-icon-s-unfold': showProp,
          'el-icon-s-fold': !showProp
        }" @click="showProp = !showProp"></i>
      </div>
      <div v-if="iframeLoaded" class="prop-edit-panel bor-l" :style="{
        'right': showProp ? '0px' : '-311px'
      }">
        <default-prop v-if="shapeType === 'default'" :shape = "shape" :roles="roles" @saveShape="saveShape"></default-prop>
      </div>
    </el-card>
    <el-dialog append-to-body title="保存" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input size="medium" v-model="model.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input size="medium" type="textarea" :rows="3" v-model="model.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="saveModelCallback">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { getList } from "@/api/system/role";
import defaultProp from './edit-prop/default-prop';

export default {
  components: {
    'default-prop': defaultProp
  },
  data(){
    return {
      showProp: true,
      shapeType: '',
      shape: null,
      loading: false,
      iframeWindow: null,
      roles: [],
      iframeLoaded: false,
      formLabelWidth: '120px',
      model: {
        name: '',
        description: ''
      },
      dialogFormVisible: false,
      $$modeSave: null
    }
  },
  props: {
    modelId: {
      type: String,
      default: ''
    }
  },
  mounted(){
    let iframe = this.$el.getElementsByTagName('iframe')[0];
    let iframeWindow = iframe.contentWindow;
    iframeWindow.$vm = this;
    this.iframeWindow = iframeWindow;
    getList(1 , 100000 , {}).then(
      res => {
        if(res.data.code === 200){
          this.roles = res.data.data;
        }
      }
    )
  },
  methods: {
    editShape(data){

      if(data && data.type && this[data.type]){
        this[data.type](data);
      }

      // if(data && data['type'] == 'selectedShape'){
      //   this.shape = data['data'];
      //   if(this.shape.type !== 'ServiceTask'){
      //     this.shapeType = 'default';
      //   }else{
      //     this.shapeType = 'ServiceTask';
      //   }
      // }
    },
    saveShape(shape){
      this.postMessage({
        type: 'selectedShape',
        data: shape
      })
    },
    saveModel(model , $save){
      this.dialogFormVisible = true;
      this.$$modeSave = $save;
      this.model = model;
    },
    saveModelCallback(){
      // this.
      if(this.$$modeSave){
        const loading = this.$loading({
          lock: true,
          text: '正在保存...',
          spinner: 'el-icon-loading',
          // background: 'rgba(0, 0, 0, 0.7)'
        });
        let $services = this.$$modeSave.services;
        this.$$modeSave.SaveModel($services.$scope , $services.$http , this.model).then(
          () => {
            this.dialogFormVisible = false;
            loading.close();
            this.back();
          }
        );
      }
    },
    selectedShape(data){
      let shapeType = data['data']['type'].split('|')[0];
      this.shape = data['data'];
      if (this.shape['properties'] && this.shape['properties']['oryx-documentation']) {
        this.shape['properties']['oryx-documentation'] = this.shape['properties']['oryx-documentation'].replace('|' + shapeType, '');
      }
      if (this.shape['propertiesTitle']) {
        this.shape['propertiesTitle'].forEach(
          item => {
            if (item['key'] == 'oryx-documentation') {
              item['value'] = item['value'].replace('|' + shapeType, '');
            }
          }
        )
      }
      if(this['typeBy' + shapeType]) {

        this.loading = true;
        this.shapeType = shapeType;
        this['typeBy' + shapeType]();

      } else {

        this.loading = false;
        this.shapeType = 'default';

      }
    },
    postMessage(data){
      this.iframeWindow['postMessage'] && this.iframeWindow.postMessage(data, "*");
    },
    back(){
      this.$emit('saved' , null);
    }
  }
}
</script>
<style lang="scss">
  .activiti-card{
    .el-card__body{
      padding: 0px 0 0px 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
    }
  }
  .prop-edit-panel-icon{
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    text-align: center;
  }
  .prop-edit-panel{
    position: absolute;
    top: 50px;
    width: 300px;
    bottom: 0px;
    right: 0;
    background: #fff;
    transition: right .5s;
    overflow: auto;
  }
</style>